<template>
  <div class="data-collection-container">
    <a-card title="数据采集">
      <a-table :columns="columns" :data-source="data">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'action'">
            <span>操作</span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a>编辑</a>
              <a>删除</a>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'DataCollectionView',
  setup() {
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: '操作',
        key: 'action',
      },
    ]

    const data = ref([
      {
        id: '1',
        name: '数据源1',
        status: '运行中',
      },
      {
        id: '2',
        name: '数据源2',
        status: '已停止',
      },
    ])

    return {
      columns,
      data,
    }
  },
})
</script>
